{{#contentFor "Styles"}}
<style type="text/css">
    .accordion-item{
        position: relative;
    }

    .accordion-item > .accordion-header > .form-check {
        position: absolute;
        z-index: 10;
        top: 10px;
        right: 70px;
        font-size: 1.5rem;
    }
</style>
{{/contentFor}}
{{#contentFor "Scripts"}}
<script type="text/javascript" src="/Scripts/juicer-min.js"></script>
<script type="text/javascript" src="/Scripts/clipboard.min.js"></script>
<script type="text/javascript">
    $(function () {
        var changedDatas;

        $('#divChangeds').on('click', '.accordion-header .form-check', function (e) {
            var chk = $(this).find('.form-check-input');

            $(this).parents('.accordion-item').find('.accordion-body :checkbox').prop('checked', chk.prop('checked'));
        });

        $('[data-ddl-target]').change(function () {
            var current = $(this).find('option:selected');

            var dbIndex = current.val();
            var dbType = current.attr('data-dbtype');
            var target = $(this).attr('data-ddl-target');

            if (dbIndex) {
                $.ajax({
                    method: 'get',
                    url: `/api/${dbType}/${dbIndex}/dbs`,
                    dataType: 'json'
                }).then(function (rs) {
                    if (!rs.success) {
                        layer.msg(`出现错误，错误详情：${rs.message}`, { time: 4000 });
                    } else {
                        $(target).html('').prop('disabled', false);
                        rs.datas.forEach(function (item) {
                            $(target).append(`<option value="${item.SCHEMA_NAME}">${item.SCHEMA_NAME}</option>`);
                        });
                    }
                });
            } else {
                $(target).html('<option value="">-- 请选择 --</option>').prop('disabled', true);
            }
        });

        $('#btnBegin').click(function () {
            var lindex = layer.load();
            var sourceDbIndex = $('#ddlSources').val();
            var sourceDbName = $('#ddlSource').val();
            var targetDbIndex = $('#ddlTargets').val();
            var targetDbName = $('#ddlTarget').val();

            if (!sourceDbName) {
                layer.close(lindex);
                layer.msg('请选择源数据库！', { time: 4000 });

                return;
            }

            if (!targetDbName) {
                layer.close(lindex);
                layer.msg('请选择目标数据库！', { time: 4000 });

                return;
            }

            changedDatas = {};
            $('#btnDdls').prop('disabled', true);

            $.ajax({
                type: 'get',
                url: `/api/db/tools/${sourceDbIndex}/${sourceDbName}/compare/${targetDbIndex}/${targetDbName}`,
                dataType: 'json',
                success: function (rs) {
                    changedDatas = rs;

                    rs.adds = rs.adds || [];
                    rs.removes = rs.removes || [];
                    rs.changeds = rs.changeds || [];

                    $('#btnDdls').prop('disabled', false);
                    $('#divChangeds').html(juicer($('#dbChanges').html(), rs));
                },
                complete: function () {
                    layer.close(lindex);
                }
            });
        });

        $('#btnDdls').bind('click', function () {
            var lindex = layer.load();
            var submitDatas = {
                source: changedDatas.source,
                target: changedDatas.target,
                adds: [],
                changeds: [],
                removes: []
            };

            $('#btnDdls').prop('disabled', true);
            $('#collapseOne [data-index]:checked').each(function () {
                submitDatas.adds.push(changedDatas.adds[$(this).attr('data-index')]);
            });
            $('#collapseTwo [data-index]:checked').each(function () {
                submitDatas.changeds.push(changedDatas.changeds[$(this).attr('data-index')]);
            });
            $('#collapseThree [data-index]:checked').each(function () {
                submitDatas.removes.push(changedDatas.removes[$(this).attr('data-index')]);
            });

            $.ajax({
                type: 'post',
                cache: false,
                url: '/api/db/tools/ddl/build',
                headers: {
                    'content-type': 'application/json'
                },
                data: JSON.stringify(submitDatas),
                dataType: 'json',
                success: function (rs) {
                    $('#divDdls').html(juicer($('#ddlViews').html(), { items: rs }));
                },
                complete: function () {
                    layer.close(lindex);
                    $('#btnDdls').prop('disabled', false);
                }
            });
        });

        $('#divDdls').on('click', 'button', function () {
            var clipboard = new Clipboard('#btnCopy');

            clipboard.on('success', function (e) {
                layer.msg('已复制到剪切板！', { time: 4000 });
            });

            clipboard.on('error', function (e) {
                console.log(e);
            });
        });
    });
</script>
<script id="dbChanges" type="text/template">
  <div class="accordion" id="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <span style="flex:1;">需要添加的表</span>
                <span class="badge bg-success rounded-pill" style="margin-right: 10px;">${adds.length}</span>
            </button>
            <span class="form-check form-switch">
                <input class="form-check-input" type="checkbox" checked />
            </span>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
            <div class="accordion-body" style="overflow:auto;max-height:400px;">
                <ul class="list-group">
                   {@each adds as item, index}
                    <li class="list-group-item">
                        <span class="form-check form-switch">
                            <input id="chk${item.name}" type="checkbox" class="form-check-input" checked data-index="${index}" />
                            <label for="chk${item.name}" class="form-check-label">
                                ${item.name}{@if item.comment}(${item.comment}){@/if}
                            </label>
                        </span>
                    </li>
                   {@/each}
                </ul>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <span style="flex:1;">需要修改的表</span>
                <span class="badge bg-success rounded-pill" style="margin-right:10px;">${changeds.length}</span>
            </button>
            <span class="form-check form-switch">
                <input class="form-check-input" type="checkbox" checked />
            </span>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
            <div class="accordion-body" style="overflow:auto;max-height:400px;">
                <ul class="list-group">
                {@each changeds as item, index}
                    <li class="list-group-item">
                        <span class="form-check form-switch">
                            <input id="chk${item.table}" class="form-check-input" type="checkbox" checked data-index="${index}" />
                            <label for="chk${item.table}" class="form-check-label">
                                ${item.table}{@if item.comment}(${item.comment}){@/if}
                            </label>
                        </span>
                    </li>
                {@/each}
                </ul>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <span style="flex:1">需要删除的表</span>
                <span class="badge bg-success rounded-pill" style="margin-right:10px;">${removes.length}</span>
            </button>
            <span class="form-check form-switch">
                <input class="form-check-input" type="checkbox" />
            </span>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
            <div class="accordion-body" style="overflow:auto;max-height:400px;">
                <ul class="list-group">
                {@each removes as item, index}
                <li class="list-group-item">
                    <span class="form-check form-switch">
                        <input id="chk${item.name}" class="form-check-input" type="checkbox" data-index="${index}" />
                        <label for="chk${item.name}" class="form-check-label">
                            ${item.name}{@if item.comment}(${item.comment}){@/if}
                        </label>
                    </span>
                </li>
                {@/each}
                </ul>
            </div>
        </div>
    </div>
  </div>
</script>
<script id="ddlViews" type="text/template">
<pre id="ddlRs" class="form-control" style="overflow:auto; height:500px;" readonly>
{@each items as item}
${item}<br/>
{@/each}
</pre>
<button id="btnCopy" class="btn btn-primary" style="  position: absolute;top: 110px;right: 18px;" data-clipboard-action="copy" data-clipboard-target="pre">
    <i class="bi bi-clipboard-data"></i> 复制
</button>
</script>
{{/contentFor}}
<div class="card card-primary">
    <div class="card-body">
        <div class="row">
            <div class="col-4">
                <div class="input-group">
                    <label class="input-group-text">源数据库</label>
                    <select id="ddlSources" data-ddl-target="#ddlSource" class="form-select">
                        <option value="">-- 请选择服务器 --</option>
                        {{#each dbs}}
                        <option value="{{@index}}" data-dbtype="{{type}}">{{name}}</option>
                        {{/each}}
                    </select>
                    <select id="ddlSource" class="form-select" disabled>
                        <option value="">-- 请选择 --</option>
                    </select>
                </div>
            </div>
            <div class="col-4">
                <div class="input-group">
                    <label class="input-group-text">目标据库</label>
                    <select id="ddlTargets" data-ddl-target="#ddlTarget" class="form-select">
                        <option value="">-- 请选择服务器 --</option>
                        {{#each dbs}}
                        <option value="{{@index}}" data-dbtype="{{type}}">{{name}}</option>
                        {{/each}}
                    </select>
                    <select id="ddlTarget" class="form-select" disabled>
                        <option value="">-- 请选择 --</option>
                    </select>
                </div>
            </div>
            <div class="col-2 btn-group">
                <button id="btnBegin" type="button" class="btn btn-primary">
                    <i class="bi-receipt-cutoff"></i> 开始比较
                </button>
                <button id="btnDdls" type="button" class="btn btn-success" disabled>
                    <i class="bi bi-lightning-fill"></i> 生成脚本
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div id="divChangeds" class="col-sm-4"></div>
    <div id="divDdls" class="col-sm-8"></div>
</div>